模版引擎 nunjucks

发表于 | | 阅读次数
字数统计 428 | 阅读时长 2

在 js 中，通过 nunjucks.render(模板名 name , 数据 context) 来得到页面数据，可通过 res.end(数据) 将页面传递出去。

  • 注释

    1
    {# 注释 #}

  • 变量

    1
    {{ 变量名 }}

  • if 判断

    1
    2
    3
    4
    5
    6
    7
    {% if 条件1 %}
      执行内容1;
    {% elif 条件2 %}
      执行内容2;
    {% else %}
      执行内容3;
    {% endif %}

  • for 循环
    for 可以遍历数组和对象

    1
    2
    3
    4
    5
    <ul>
      {% for item in items %}
        <li>{{ item }}</li>
      {% endfor %}
    </ul>

  • macro 宏命令

    1
    2
    3
    4
    5
    6
    7
    8
    {#定义了一个名为user的方法， 传入参数name#}
      {% macro user(name) %}
        <h1> {{ name }} </h1>
      {% endmacro %}
    {#调用函数#}
      {{user('小明')}}
      {{user('小红')}}

  • 模版继承
    观察各种网站可以发现，网站的结构实际上是类似的，头部、尾部都是固定格式，只有中间页面部分内容不同。如果每个模板都重复头尾，一旦要修改头部或尾部，那就需要改动所有模板。
    更好的方式是使用继承。先定义一个基本的网页框架 base.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% block header %}
      <h3>Unnamed</h3> 
    {% endblock %}
    {% block body %}
       <div>No body</div> 
    {% endblock %}
    {% block footer %}
      <div>copyright</div> 
    {% endblock %}

    base.html 定义了三个可编辑的块，分别是 header、body、footer。子模版也可以有选择地对块重新定义。

    1
    2
    3
    4
    5
    {% extends 'base.html' %}
    {% block header %}<h1>{{ header }}</h1>{% endblock %}
    {% block body %}<p>{{ body }}</p>{% endblock %}

    然后对子模版进行渲染：

    1
    2
    3
    4
    console.log(env.render('extend.html', {
        header: 'Hello',
        body: 'bla bla bla...'
    }));

    输出 HTML 如下：

    1
    2
    3
    <h1>Hello</h1>
    <p>bla bla bla...</p>
    <div>copyright</div> <-- footer没有重定义，所以仍使用父模板的内容

  • include
    include 可引入其他的模板

    1
    2
    {#复制 index.njk 的内容#}
    {% include "index.njk" %}

  • import
    user.njk:

    1
    2
    3
    {% macro create(content) %}
      <p>{{content}}</p>
    {% endmacro %}

    通过导入 user.njk，相当于将其赋值给 user
    const user = require(‘user’);

    1
    2
    {% import 'user.njk' as user %} 
    {{user.create('内容')}}